<template>
  <div class="ssss">
    <div class="search">
        <div class="sear">
            <div>北京 <span>▼</span></div>
            <div class="ipt" >
                <input type="text" placeholder="你想住哪里？" @change="search" placeholder-style="color:rgb(128,128,128);"> 
                <img src="https://img.ljcdn.com/beike/arsenal/1558325041803.png" @click="gosearch" alt="">
            </div>
        </div>
        <span>取消</span>
    </div>
    <div class="list">
        <div class="houselis" v-for="item in newlist" :key="item">
            <div class="houselis_left">
                <img :src="item.img" alt="">
            </div>
            <div class="houselis_right">
                <div class="hright1">
                    <h2>{{item.title}}</h2>
                </div>
                <div class="hright2">
                    {{item.size}}
                </div>
                <div class="hright3">
                    <span>{{item.price}}</span>
                    <span>{{item.danprice}}</span>
                </div>
                <div class="hright4">
                    小区
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            value:'',
            hothousesList:[
					{
						img:"https://images.sqfcw.com/attachment/build/20201204/7feee8cd9afbdb480207796e77feb05efcf71a40.png?x-oss-process=style/w_240",
						title:'富园·时光印',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210416/38dc6ae8afe5d21274be757d736832d54211cfe8.png?x-oss-process=style/w_240',
						title:'恒大湖山半岛',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20201201/b0cd0fbab7ab8f33193839d0abdeb38b00a7cd62.png?x-oss-process=style/w_240',
						title:'逸品尚居',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20201201/4dd07f2d5a84d1a7022deaa1873112b3b167dbad.jpeg?x-oss-process=style/w_240',
						title:'华鸿清华名邸',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210202/0b794c5752f419881270b5e8f47c12e125510eb7.png?x-oss-process=style/w_240',
						title:'绿城·梨园湾小镇',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20200630/ed9ecf56dead60919ec9939ac3969ba3cb8bea06.png?x-oss-process=style/w_240',
						title:'中南紫云集',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210425/864c1b5e6ea230d0653374027fefbfc34e92d663.jpeg?x-oss-process=style/w_240',
						title:'建发·文瀚府',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
                    },
                    {
						img:"https://images.sqfcw.com/attachment/build/20201204/7feee8cd9afbdb480207796e77feb05efcf71a40.png?x-oss-process=style/w_240",
						title:'富园',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20210416/38dc6ae8afe5d21274be757d736832d54211cfe8.png?x-oss-process=style/w_240',
						title:'恒湖半岛',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
					{
						img:'https://images.sqfcw.com/attachment/build/20201201/b0cd0fbab7ab8f33193839d0abdeb38b00a7cd62.png?x-oss-process=style/w_240',
						title:'逸居',
						size:'43平/2室 1厅/远洋新天地',
						price:'114.98万',
						danprice:'11500元/m²',
					},
            ],
            secondhouseList:[
                {
                    img:"https://images.sqfcw.com/attachment/information/20210623/d2a3d8dc8c201bf19847803d363a664406abcaee.jpeg?x-oss-process=style/w_240",
                    title:'水韵城',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210617/5808e7cc2287bb56421bc5f5df1b0aae7a425030.jpeg?x-oss-process=style/w_240",
                    title:'金外滩国际花园',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210527/05bf574943e4e982d0e2f706527152d982bb5cc9.jpeg?x-oss-process=style/w_240",
                    title:'马陵小区',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210620/957f1ebbdc55cf2c91ce299401705190e67022e9.jpeg?x-oss-process=style/w_240",
                    title:'墨香居',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210621/0d291ef6e2cc844bd7be91a417a63df95a5f55eb.jpeg?x-oss-process=style/w_240",
                    title:'碧桂园翰林阁',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210621/d873a26c2a50ac9a6573290e282d3279b8822f62.jpeg?x-oss-process=style/w_240",
                    title:'华泰御花园',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
                {
                    img:"https://images.sqfcw.com/attachment/information/20210616/aa1606569a0faaf04b13f2c8eb651b8b200f4923.jpeg?x-oss-process=style/w_240",
                    title:'恒大悦澜湾',
                    size:'43平/2室 1厅/远洋新天地',
                    price:'114.98万',
                    danprice:'11500元/m²',
                },
            ],
            newlist:[]
        }
    },
    methods: {
        search(e){
            this.value = e.detail.value;
            if(this.value===""){
                this.newlist=[]
            }
        },
        gosearch(){
            let res = this.hothousesList.filter(item => item.title.includes(this.value));
            this.newlist=res
            if(this.value===""){
                this.newlist=[]
            }
            if(res.length===0){
                this.newlist=''
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.search{
		width: 90%;
		height: 120rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		.sear{
			width: 85%;
			height: 64rpx;
			background: rgb(238,238,238);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>div:nth-child(1){
				width: 120rpx;
				height: 40rpx;
				border-right: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				>span{
					font-size: 12px;
					margin-left: 12rpx;
				}
			}
			.ipt{
				display: flex;
				width: 400rpx;
				align-items: center;
				justify-content: space-between;
				>input{
					font-size: 14px;
				}
				>img{
					width: 50rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
        >span{
            margin-left: 30rpx;
            font-size: 14px;
        }
	}
.list{
    width: 90%;
    margin: 20rpx auto;
    display: flex;
    flex-direction: column;
    .houselis{
        width: 100%;
        height: 240rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .houselis_left{
            width: 260rpx;
            height: 180rpx;
            >img{
                width: 100%;
                height: 100%;
            }
        }
        .houselis_right{
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            .hright1{
                height: 50rpx;
                line-height:  50rpx;
                display: flex;
                align-items: center;
                font-weight: bold;
            }
            .hright2{
                height: 36rpx;
                line-height: 36rpx;
                color: rgb(90,93,90);
                font-size: 14px;
            }
            .hright3{
                height: 50rpx;display: flex;
                align-items: center;
                font-size: 12px;
                >span:nth-child(1){
                    color: rgb(255,153,0);
                }
                >span:nth-child(2){
                    color: rgb(102,102,102);
                    margin-left: 12rpx;
                }
            }
            .hright4{
                height: 40rpx;
                line-height: 40rpx;
                width: 100rpx;
                background: rgb(238,240,239);
                color: rgb(141,144,142);
                font-size: 12px;
                text-align: center;
            }
        }
    }
}
</style>